<template>
  <div class="cate">
      <div class="title">
        <span>商品分类</span>
      </div>
      <div class="content">
        <div class="content_left">
          <ul>
            <li v-for="(item, index) in Leftmessage" :key="index" @click='TitleChange(index)' :class="{active:isChoose==index}">{{item}}</li>
          </ul>
        </div>
        <div class="content_right" >
          <ul v-for="(item1, index) in Rightmessage" :key="index">
            <span class="content_title">{{item1.cat_name}}</span><br>
              <li v-for="(item2, index) in item1.children" :key="index">
              <router-link :to="'/GoodList/'+item2.cat_id">
                <img :src="item2.cat_icon"><br>
                <span>{{item2.cat_name}}</span>
              </router-link>
            </li>
          </ul>
        </div>
        <br>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Leftmessage:[],
      Rightmessage:[],
      isChoose:0,
      Allmessage:[],
    }
  },
  created() {
    this.getMessage()
  },
  methods: {
    getMessage(){
      this.axios.get('https://api-hmugo-web.itheima.net/api/public/v1/categories')
      .then(res=>{
        this.Leftmessage=res.data.message.map(v=>v.cat_name)
        this.Allmessage=res.data.message
        this.Rightmessage=res.data.message[0].children
      })
    },
    //改变标题
    TitleChange(index){
      this.isChoose=index
      this.Rightmessage=this.Allmessage[index].children
    }
  },
}
</script>

<style scoped>
.title{
  width: 100%;
  height: 80px;
  background-color: rgb(226, 73, 73);
  text-align: center;
  line-height: 80px;
  position: fixed;
  top: 0;
}
.title span{
  font-size: 20px;
  color: rgb(172, 165, 165);
  font-weight: 600;
}
.content{
  display: flex;
  padding-top: 80px;
  padding-bottom: 60px;
}
.content_left{
  flex: 1;
}
.content_left li{
  font-size: 16px;
  width: 100%;
  margin-top: 10px;
  float: left;
  list-style-type: none;
}
.content_right{
  flex: 3;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
.content_title{
  display: inline-block;
  width: 100%;
  margin-top: 10px;
}
.content_right li{
  width: 33.33%;
  height: 96.98px;
  float: left;
  list-style-type: none;
}
.content_right li img{
  width: 50px;
  height: 50px;
}
.content_right ul>span{
  color: red;
}
.content_right li span{
  font-size: 14px;
}
.active{
  color:red;
}
</style>